<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initialscale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
</head>

<body>
   <div id="app">
        <!-- 修饰符用于指出一个指令应该以特殊方式绑定。
        这里的 .prevent 修饰符告诉 v-on 指令对于触发的事件调用js的
        event.preventDefault()：
        即阻止表单提交的默认行为 -->
        <form  action="save" v-on:submit.prevent="onSubmit">
            <input type="text" id="name" v-model="user.name">
            <button type="submit">保存</button>
        </form>
   </div>
   <script src="vue.min.js"></script>
   <script>
     new Vue({
         el: '#app',
         data: {
           user:{}
          },
          methods:{
              onSubmit(){
                if (this.user.name) {
                console.log('提交表单')
                } else {
                    alert('请输入用户名')
                }
              }
          }
     })
 </script>
</body>

</html>